@import "public";
@import "main";

$headH:.95rem;
.g-headD{height: $headH}
.g-head{position: fixed; z-index: 50; left: 0; top: 0; width: 100%; @extend .transition;
  &:before{@include before(); left: 0; top: 0; right: 0; height: 1.55rem; background: url("../image/head.png") center repeat-x; background-size: auto 100%}
  .wal{min-height: $headH; position: relative; max-width: 100%; margin: 0 .5rem}
  a.logo{display: block; background: url("../image/logo.png") center no-repeat; background-size: 100%; width: 1.7rem; height: 100%; @include absolute($l:0, $t:0)}
  .btn{@include absolute($t:50%, $r:-.2rem); margin-top: -.17rem; @extend .flex;
    a{width: .6rem; height: .34rem; line-height: .34rem; text-align: center; font-size: .16rem; color: #fff; text-transform: uppercase; @include radius(.5rem); margin-left: 2px;
      &:hover, &.on{background: $color}
    }
  }
}
.g-nav{@include absolute($t:0, $r:0, $z:5); width: 100%;
  ul{@extend .flexWrap; @extend .justifyCenter}
  li{position: relative}
  a.name{display: block; height: $headH; line-height: $headH; font-size: .16rem; color: #fff; position: relative; padding: 0 .33rem;
    &:before{@include before(); left: 50%; right: 50%; top: .8rem; height: .02rem; background: $red; opacity: 0}
    &.on{color: $red;
      &:before{opacity: 1; left: .33rem; right: .33rem}
    }
  }
}
@media screen and (min-width: 800px){
  .g-head.hide{top: -1.55rem}
  .g-nav{
    .list{width: .82rem; background: #fff; @include absolute($l:50%, $t:.82rem); margin-left: -.41rem; padding: 0 .1rem .1rem; opacity: 0; visibility: hidden}
    .list-1{width: 4.58rem; margin-left: -2.29rem; display: flex; display: -webkit-flex; justify-content: space-between; -webkit-justify-content: space-between; padding: .25rem .3rem .25rem 0;
      .side{width: 1.87rem;
        dd{line-height: .43rem; height: .44rem; font-size: .18rem; font-weight: bold; color: #666; padding-left: .5rem; position: relative}
        dd.on{color: $red;
          &:before{@include before(); top: 50%; right: 0; width: 1px; height: .16rem; margin-top: -.08rem; background: $red}
        }
      }
      .list2{width: 2.08rem; display: none;
        h3{display: none}
        dd{border-bottom: #ccc solid 1px;
          a{display: block; height: .44rem; line-height: .43rem; font-size: .14rem; color: #666; position: relative;
            &:before{@include before(); left: 0; bottom: -1px; right: 0; height: 1px; background: $red; opacity: 0}
            em{padding-right: .34rem; display: inline-block; position: relative;
              &:after{@include before(); top: 0; right: 0; bottom: 0; background: url("../image/img7.png") right center no-repeat; background-size: 100%; width: .07rem}
            }
          }
          a:hover{color: $red;
            &:before{opacity: 1}
          }
          a.on{color: $red; border-color: $red;
            &:before{opacity: 1}
            em:after{@include rotate(90deg)}
          }
          dl{border-top: #ccc solid 1px; padding: .06rem 0; display: none;
            dd{border: 0; padding: .06rem 0}
            a{height: .2rem; line-height: .2rem; display: inline-block}
          }
        }
        dd:last-child{border: 0}
      }
    }
    .list-2{
      a{display: block; text-align: center; border-bottom: #ccc solid 1px; line-height: .43rem; font-size: .14rem; color: #666}
      a:hover{color: $red; border-color: $red}
      dd:last-child a{border: 0}
    }
    li:hover{
      .list{opacity: 1; visibility: visible;
        $time:0.5s;
        transition:opacity $time ease;
        -webkit-transition:opacity $time ease;
        -moz-transition:opacity $time ease;
        -o-transition:opacity $time ease;
      }
      a.name{color: $red;
        &:before{opacity: 1; left: .33rem; right: .33rem}
      }
    }
  }
}

.g-foot{background: #f0f0f0; position: relative; color: #666; font-size: .14rem;
  a{color: #666;
    &:hover{color: $red}
  }
  &:before{@include before(); left: 0; right: 0; bottom: .62rem; height: 1px; background: #d4d4d4}
  .wal{min-height: 4.55rem; position: relative}
  .tel{padding: .68rem 0 .5rem 0;
    div{font-size: .18rem; padding-left: .28rem; background: url("../image/img22.png") left center no-repeat; background-size: .22rem; line-height: .24rem}
    h2{font-family: 'Oswald'; font-weight: 400; font-size: .36rem; letter-spacing: .03rem; line-height: .5rem}
  }
  .list{
    .ico{width: .18rem; margin-right: .06rem}
    li{height: .31rem; @extend .flex; @extend .itemsCenter}
  }
  .list2{@include absolute($l:6rem, $t:1rem);
    h3{font-size: .17rem; padding-bottom: .28rem}
    li{@extend .flex; font-size: .14rem; line-height: .3rem;
      dl{@extend .flexWrap; width: 1.5rem}
      dd{padding-right: .1rem}
    }
  }
  .btn{@include absolute($t:.95rem, $r:0); width: .44rem;
    li{position: relative; height: .6rem;
      .name{display: block}
      .ewm{width: 1.02rem; @include absolute($t:0, $r:.44rem); opacity: 0; visibility: hidden; @extend .transition}
    }
    li:hover .ewm{opacity: 1; visibility: visible; right: .6rem}
  }
  .msg{@include absolute($l:0, $b:0, $r:0); height: .62rem; @extend .flexWrap; @extend .itemsCenter;
    p{padding-right: .14rem; opacity: .5}
    div{@include absolute($r:0);
      em{padding: 0 .05rem}
    }
  }
}

.side-bar{position: fixed; z-index: 30; bottom: 3rem; right: .5rem; width: .6rem; opacity: 0; visibility: hidden; @extend .transition;
  &.show{opacity: 1; visibility: visible}
  li{padding-bottom: .1rem}
  a{display: block; background: #c6151d; @include radius(50%);
    &:hover{background: $red}
  }
}

.default{position: fixed; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; background: #000;
  .layer{@include absolute($l:0, $t:50%, $r:0); @extend .flex; @extend .justifyCenter; color: #fff; margin-top: -1rem;
    h2{font-size: .51rem; position: relative; height: .5rem; line-height: .5rem}
    h2:nth-child(1){padding-right: .7rem;
      &:after{@include before(); top: 50%; right: .37rem; width: .04rem; height: .5rem; background: #c22c33; margin-top: -.25rem}
    }
  }
  canvas{@include absolute($l:50%, $t:50%); min-height: 100%; min-width: 100%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
  }
}

/*index*/
.indexFlash{width: 100%; overflow: hidden; position: relative;
  li{height: 9rem; background: center no-repeat; background-size: cover; max-height: 100vh; position: relative;
    .layer{@include absolute($l:0, $t:3.45rem, $r:0); @extend .flex; @extend .justifyCenter; font-size: .51rem; font-weight: bold; color: #fff;
      &:before{@include before(); left: 50%; top: 50%; width: .04rem; height: .5rem; background: $color; margin-top: -.25rem; margin-left: -.02rem}
      p{padding: 0 .45rem}
    }
    .layer2{@include absolute($l:0, $t:0, $r:0, $b:0); @extend .flexColumn; @extend .justifyCenter; @extend .itemsCenter; color: #fff; text-align: center;
      .img{width: 5.46rem; padding-bottom: .85rem}
      .img2{width: 3.99rem; padding-top: 1rem}
      h2{font-size: .54rem; line-height: .68rem; @extend .flex;
        em{padding-left: .54rem; position: relative;
          &:before{@include before(); left: .25rem; top: 50%; width: .04rem; height: .5rem; background: $color; margin-top: -.25rem}
        }
      }
      .more{padding-top: .68rem;
        a{@include radius(.5rem); display: block; color: #fff; background: rgba(191, 21, 29, .7); width: 1.9rem; height: .41rem; line-height: .41rem; font-size: .14rem;
          em{padding-right: .5rem; background: url("../image/img38_13.png") right center no-repeat; background-size: .38rem}
          &:hover{background: $red}
        }
      }
    }
  }
  .dots{@include absolute($l:50%, $b:.5rem); margin-left: -6.25rem; @extend .flex;
    span{width: .65rem; height: .04rem; margin-left: .16rem; background: #fff; @include radius(.04rem); position: relative;
      &:before{@include before(); left: -.1rem; top: 0; width: .04rem; height: .04rem; background: #fff; @include radius(50%)}
      &:first-child:before{display: none}
    }
    span.swiper-pagination-bullet-active{background: $color}
  }
}

a.p-more{font-size: .22rem; display: block; line-height: .4rem; text-transform: uppercase; color: #666; width: 1.3rem; position: relative; letter-spacing: .01rem;
  &:before{@include before(); top: 0; right: 0; bottom: 0; width: .36rem; background: url("../image/img36.png") right center no-repeat; background-size: auto .12rem}
  &:hover{color: $red;
    &:before{background-image: url("../image/img56.png"); width: .56rem; right: -.2rem}
  }
}
a.p-more2{color: #fff;
  &:before{background-image: url("../image/img36_2.png")}
  &:hover{color: $red;
    &:before{background-image: url("../image/img56.png")}
  }
}
.index-title{position: relative; max-width: 8.9rem;
  h2{font-size: .46rem; line-height: 1em; padding-bottom: .12rem}
  p{font-size: .18rem; color: #999; max-width: 5.65rem; line-height: .31rem}
  a.p-more{@include absolute($t:50%, $r:0); margin-top: -.2rem}
}

.index-about{padding: 1.5rem 0 1.45rem 0; width: 100%; overflow: hidden; position: relative;
  .list{margin-right: -3.6rem; margin-left: -.5rem; padding-top: .9rem;
    ul{@extend .flex}
    li{width: 33.333%; height: 4.73rem; background: center no-repeat; background-size: cover; @extend .transition; position: relative; overflow: hidden;
      &:before{@include before(); left: 0; bottom: 0; right: 0; top: 0; background: url("../image/bg20.png") center bottom repeat-x; background-size: auto 1.1rem}
      .layer{@include absolute($l:0, $t:0, $r:0, $b:0); @extend .flexColumn; justify-content: flex-end; -webkit-justify-content: flex-end; padding: 0 .5rem; color: #fff; @extend .transition;
        h3{font-size: .32rem; padding-bottom: .4rem; @extend .transition}
        .container{height: 0; overflow: hidden; @extend .transition}
        p{font-size: .16rem; line-height: .24rem; max-width: 5.6rem}
        .more a{display: block; width: .86rem; height: .95rem; background: url("../image/more86.png") center no-repeat; background-size: 100%}
      }
    }
    li.on{
      &:before{opacity: 0}
      .layer{background: rgba(0, 0, 0, .2);
        h3{color: $red}
        .container{height: 2.6rem}
      }
    }
  }
}

.index-technology{
  .list{padding-top: 1rem;
    ul{@extend .flexWrap; @extend .flexBetween}
    li{width: 3.2rem; text-align: center; min-height: 5.5rem;
      .ico{width: 2.5rem; margin: 0 auto}
      h3{font-size: .3rem; font-weight: 400; line-height: 1em; padding: .5rem 0 .25rem 0}
      p{font-size: .18rem; line-height: .32rem; color: #666}
    }
    li:hover .ico{
      animation: upDown 2s infinite linear;
      -webkit-animation: upDown 2s infinite linear;
    }
  }
}
@keyframes upDown {
  0% {transform: translateY(0)}
  25% {transform: translateY(-.1rem)}
  50% {transform: translateY(0)}
  75% {transform: translateY(.1rem)}
  100% {transform: translateY(0)}
}
@-webkit-keyframes upDown{
  0% {-webkit-transform: translateY(0)}
  25% {-webkit-transform: translateY(-.1rem)}
  50% {-webkit-transform: translateY(0)}
  75% {-webkit-transform: translateY(.1rem)}
  100% {-webkit-transform: translateY(0)}
}

.index-business{position: relative; color: #fff;
  .head{@include absolute($l:0, $t:0, $r:0);
    .wal{position: relative; padding-top: 1.25rem}
    .index-title p{color: #fff}
    .btn{@include absolute($t:1.17rem, $r:-.12rem);
      ul{@extend .flex}
      li{width: .8rem; height: .86rem; text-align: center; position: relative; font-size: .27rem; line-height: .37rem; @extend .transition; padding-top: .06rem; margin-left: .68rem; letter-spacing: .01rem;
        &:after{@include before(); left: -.33rem; top: 50%; width: .08rem; height: .08rem; background: #fff; @include radius(50%); margin-top: -.04rem}
        &:first-child:after{display: none}
        &:before{@include before(); left: 0; bottom: -.05rem; right: 0; height: .02rem; background: #bc333e; opacity: 0}
      }
      li.on, li:hover{background: #bc333e}
      li.on:before{opacity: 1}
    }
  }
  .list{width: 100%; overflow: hidden; position: relative;
    li{height: 8rem; background: center no-repeat; background-size: cover; padding-top: 3.45rem}
    h3{font-size: .38rem}
    p{font-size: .18rem; padding: .15rem 0 .35rem 0}
    a.p-more{color: #fff;
      &:before{background-image: url("../image/img36_2.png")}
      &:hover{color: $red;
        &:before{background-image: url("../image/img56.png")}
      }
    }
  }
}

.index-news{width: 100%; overflow: hidden; position: relative;
  .wal{min-height: 9.45rem}
  .index-title{padding: 2rem 0 .8rem 0}
  .btn{min-height: 2.45rem;
    a{display: block; font-size: .18rem; line-height: .46rem; color: #666;
      &:hover, &.on{color: $red}
    }
  }
  .list{@include absolute($l:50%, $t:0, $r:0, $b:0); margin-left: -3.2rem;
    ul{@extend .flex}
    li{height: 9.45rem; width: 33.333%; border-left: #e1e1e1 solid 1px; @extend .transition; padding-top: 2rem;
      a{display: block; padding: 0 .55rem 0 .25rem; color: #666; position: relative;
        &:before{@include before(); left: -1px; top: -2rem; width: 1px; background: $red; height: 0}
        h3{font-size: .2rem; line-height: .27rem; height: .54rem; overflow: hidden}
        .time{padding: .1rem 0 .25rem 0; font-size: .12rem}
        p{font-size: .16rem; line-height: .22rem; height: .66rem; overflow: hidden; max-width: 3.85rem}
        .more{height: 1.3rem; position: relative;
          &:before{@include before(); left: 0; top: 0; width: .86rem; height: .8rem; background: url("../image/more86_1.png") center no-repeat; background-size: 100%}
        }
        .img{height: 1.8rem; background: center no-repeat; background-size: cover; margin-left: -.05rem; margin-right: -.05rem; @extend .transition}
      }
    }
    li.on{width: 47%; flex-shrink: 0; -webkit-flex-shrink: 0;
      a{color: $red;
        &:before{height: 2.15rem; top: .06rem}
        .more:before{background-image: url("../image/more86.png")}
        .img{height: 3.58rem}
      }
    }
  }
  .news-1{display: none; padding: .5rem .3rem 0 .3rem}
}

/*page*/
.p-banner{background: center no-repeat; background-size: cover; height: 6rem; text-align: center; color: #fff; @extend .flexColumn; @extend .itemsCenter; @extend .justifyCenter; padding-top: .5rem;
  h2{font-size: .51rem; position: relative; line-height: 1em; padding: .3rem 0;
    &:before{@include before(); left: 50%; bottom: 0; width: .5rem; height: .04rem; background: $red; margin-left: -.25rem}
  }
  a.btn{font-size: .18rem; color: #fff; background: url("../image/img52.png") center top no-repeat; background-size: .52rem; padding-top: .7rem; margin-top: .4rem}
  p{font-size: .32rem; font-weight: bold; padding-top: .38rem}
  p.p-1{font-size: .25rem; line-height: .4rem; padding-top: .15rem}
}

.p-title{
  h2{@extend .flex; @extend .itemsCenter; @extend .justifyCenter; font-size: .46rem; line-height: 1em;
    span{position: relative; padding-right: .67rem;
      &:before{@include before(); top: 0; right: .32rem; bottom: 0; width: .04rem; background: #c33037}
    }
  }
}

.technology-2{min-height: 9.85rem; position: relative; padding-top: 1.35rem; background: url("../image/img1427.png") center .43rem no-repeat; background-size: auto 6.91rem;
  h3{text-align: center; font-size: .28rem; line-height: 1em; padding-top: .28rem}
  .list{height: 1.8rem; position: relative;
    li{width: .32rem; height: .32rem; @include absolute($l:50%); margin-left: -.16rem; margin-top: -.16rem;
      &:after{@include before(); left: 50%; top: 50%; width: .04rem; height: .04rem; background: #c32f36; @include radius(50%); margin-left: -.02rem; margin-top: -.02rem}
      i{display: block; @include absolute($l:50%, $t:50%); width: .6rem; height: .6rem; border: #c32f36 solid 1px; @include radius(50%); margin-left: -.3rem; margin-top: -.3rem; opacity: 0;
        animation: technology-anim 2s infinite linear;
        -webkit-animation: technology-anim 2s infinite linear;
      }
      i:nth-child(2){
        animation-delay: 1s;
        -webkit-animation-delay: 1s;
      }
      .name{@include absolute($t:-.22rem); font-size: .16rem; white-space: nowrap; line-height: 1em}
    }
    li.li_01{margin-left: -2.97rem; top: 1.08rem;
      .name{left: -.1rem}
    }
    li.li_02{margin-left: -2.63rem; top: 1.02rem;
      .name{left: -.06rem}
    }
    li.li_03{margin-left: -2.02rem; top: 1.11rem;
      .name{left: -.2rem; top: -.2rem}
    }
    li.li_04{margin-left: -1.9rem; top: .93rem;
      .name{left: .1rem}
    }
    li.li_05{margin-left: -1.78rem; top: 1.11rem;
      .name{left: .36rem; top: 0}
    }
    li.li_06{margin-left: -2.12rem; top: 1.47rem;
      .name{left: .36rem; top: .07rem}
    }
    li.li_07{margin-left: 3.39rem; top: .8rem;
      .name{left: -.3rem}
    }
  }
  .list2{
    ul{@extend .flexWrap; @extend .flexBetween}
    li{width: 5.25rem; min-height: 2.85rem; position: relative; padding: 0 0 0 1.05rem; color: #666;
      b{color: #c33037; @include absolute($l:0, $t:-.5rem); font-size: 1.5rem; line-height: 1em}
      h4{font-size: .28rem}
      .name{font-size: .18rem; padding: .28rem 0 .12rem 0}
      dd{position: relative; font-size: .14rem; line-height: .25rem; padding-left: .2rem;
        &:before{@include before; left: 0; top: .075rem; width: .1rem; height: .1rem; background: #999}
      }
    }
    li.li_03{left: 4.7rem}
  }
}
@keyframes technology-anim {
  0% {transform: scale(0); opacity: 0}
  70% {transform: scale(.7); opacity: 1}
  100% {transform: scale(1); opacity: 0}
}
@-webkit-keyframes technology-anim{
  0% {-webkit-transform: scale(0); opacity: 0}
  70% {-webkit-transform: scale(.7); opacity: 1}
  100% {-webkit-transform: scale(1); opacity: 0}
}

.technology-3{background: url("../image/technology-3.jpg") center no-repeat; background-size: cover; min-height: 6.98rem; text-align: center;
  .title{font-size: .18rem; padding: .8rem 0 .68rem 0;
    h2{font-size: .28rem; padding-bottom: .28rem}
  }
  .list{position: relative;
    &:before{@include before(); left: 0; top: 50%; right: 0; height: 1px; background: #c22c33}
    .arrow a{display: block; width: .48rem; height: .48rem; @include radius(50%); @include absolute($t:50%); margin-top: -.24rem; background: #c22c33 center no-repeat; background-size: 100%;
      &.prev{left: 0; background-image: url("../image/prev48.png")}
      &.next{right: 0; background-image: url("../image/next48.png")}
    }
  }
  .list-wrapper{width: 100%; overflow: hidden; position: relative; background: url("../image/img191.png") center no-repeat; background-size: 1.91rem;
    &:after{@include before(); left: 50%; top: 0; width: 2.2rem; height: 2.2rem; background: url("../image/img220.png") center no-repeat; background-size: 100%; margin-left: -1.1rem;
      animation: rotate-anim 2s infinite linear;
      -webkit-animation: rotate-anim 2s infinite linear;
    }
    li{height: 2.2rem; position: relative; background: url("../image/img24.png") center no-repeat; background-size: .24rem; @extend .transition;
      .time{font-size: .16rem; color: #fff; width: 1.16rem; height: .3rem; line-height: .3rem; background: #c22c33; @include absolute($l:50%, $t:1.5rem); margin-left: -.508rem; margin-top: 0; @extend .transition}
      &:nth-child(even) .time{top: .43rem}
    }
    li.swiper-slide-active{background-size: 0;
      .time{background: rgba(0, 0, 0, 0); color: #c33037; font-size: .22rem; line-height: .3rem; top: 50%; margin-top: -.3rem; font-weight: bold; width: 1.2rem; margin-left: -.6rem;
        span{display: block}
      }
    }
  }
  .list-2{padding: .45rem 0; color: #666;
    h3{font-size: .28rem; padding-bottom: .2rem}
    p{font-size: .18rem; line-height: .32rem}
  }
}
@keyframes rotate-anim {
  0% {transform: rotate(0deg)}
  100% {transform: rotate(360deg)}
}
@-webkit-keyframes rotate-anim{
  0% {-webkit-transform: rotate(0deg)}
  100% {-webkit-transform: rotate(360deg)}
}
@keyframes rotate-anim2 {
  0% {transform: rotate(0deg)}
  100% {transform: rotate(-360deg)}
}
@-webkit-keyframes rotate-anim2{
  0% {-webkit-transform: rotate(0deg)}
  100% {-webkit-transform: rotate(-360deg)}
}

.technology-4{width: 100%; overflow: hidden; position: relative; text-align: center; padding-bottom: .6rem;
  .title{padding: 1.15rem 0 .5rem 0; position: relative; z-index: 2;
    h2{font-size: .46rem; padding-bottom: .32rem}
    p{font-size: .18rem; color: #666}
  }
  .list{min-height: 8.71rem; position: relative; background: url("../image/img285.png") center no-repeat; background-size: 2.85rem;
    &:before{@include before(); left: 50%; top: 0; width: 8.71rem; height: 8.71rem; margin-left: -4.355rem; background: url("../image/img871.png") center no-repeat; background-size: 100%;
      animation: rotate-anim 60s infinite linear;
      -webkit-animation: rotate-anim 60s infinite linear;
    }
    &:after{@include before(); left: 50%; top: 50%; width: 11.22rem; height: 11.22rem; margin-left: -5.66rem; margin-top: -5.66rem; background: url("../image/img1122.png") center no-repeat; background-size: 100%;
      animation: rotate-anim2 60s infinite linear;
      -webkit-animation: rotate-anim2 60s infinite linear;
    }
    .yuan{background: url("../image/img583.png") center no-repeat; background-size: 100%; position: absolute; left: 50%; top: 50%; width: 5.83rem; height: 5.83rem; margin-left: -2.915rem; margin-top: -2.915rem;
      animation: rotate-anim2 60s infinite linear;
      -webkit-animation: rotate-anim2 60s infinite linear;
    }
    li{width: 1.16rem; height: 1.16rem; @include absolute($l:50%, $t:50%); @extend .flexColumn; @extend .itemsCenter; @extend .justifyCenter;
      &:after{@include before(); left: 0; top: 0; right: 0; bottom: 0; background: url("../image/img116.png") center no-repeat; background-size: 100%; @extend .transition;
        animation: rotate-anim 30s infinite linear;
        -webkit-animation: rotate-anim 30s infinite linear;
      }
      &:before{@include before(); left: 0; top: 0; right: 0; bottom: 0; background: url("../image/img116on.png") center no-repeat; background-size: 100%; opacity: 0}
      .ico{width: .38rem; height: .38rem; position: relative; z-index: 5;
        img:nth-child(2){@include absolute($l:0, $t:0); opacity: 0}
      }
      .name{position: relative; font-size: .14rem; line-height: .18rem; @extend .transition; color: #666; z-index: 5; padding-top: .04rem}
    }
    li.li_01{margin-left: -.58rem; margin-top: -3.44rem}
    li.li_02{margin-left: .85rem; margin-top: -3.05rem}
    li.li_03{margin-left: 1.9rem; margin-top: -2rem}
    li.li_04{margin-left: 2.32rem; margin-top: -.48rem}
    li.li_05{margin-left: 1.9rem; margin-top: 1rem}
    li.li_06{margin-left: .85rem; margin-top: 1.92rem}
    li.li_07{margin-left: -.58rem; margin-top: 2.28rem}
    li.li_08{margin-left: -2.02rem; margin-top: 1.92rem}
    li.li_09{margin-left: -3.1rem; margin-top: 1rem}
    li.li_10{margin-left: -3.5rem; margin-top: -.48rem}
    li.li_11{margin-left: -3.08rem; margin-top: -2rem}
    li.li_12{margin-left: -2.02rem; margin-top: -3.05rem}
    li:hover{
      &:after{opacity: 0}
      &:before{opacity: 1}
      .ico{
        img:nth-child(1){opacity: 0}
        img:nth-child(2){opacity: 1}
      }
      .name{color: #c22c33}
    }
  }
}

.page-layer{position: fixed; z-index: 100; left: 0; top: 0; right: 0; bottom: 0; background: rgba(255, 255, 255, .7); opacity: 0; visibility: hidden; @extend .transition; @extend .flex; @extend .itemsCenter; @extend .justifyCenter;
  &.show{opacity: 1; visibility: visible}
  .container{background: #fff; width: 12.5rem; min-height: 2rem; @include shadow(0 .14rem .46rem rgba(177, 177, 177, .39)); position: relative}
  a.close{display: block; width: .8rem; height: .8rem; background: url("../image/close30.png") center no-repeat; background-size: .3rem; @include absolute($t:0, $r:0);
    &:hover{@include rotate(180deg)}
  }
}
.technology-layer{
  li{padding: 0 1.3rem .7rem 1.3rem;
    .name{@extend .flex; @extend .itemsCenter; padding: .56rem 0 .24rem 0;
      .ico{width: .48rem; margin-right: .16rem}
      h3{color: #c22c33; font-size: .28rem}
    }
    .content{background: #f0f0f0; font-size: .18rem; color: #666; padding: .36rem .4rem; text-align: justify; line-height: 1.8em}
  }
}

.p-content{font-size: .18rem; color: #666; text-align: justify; line-height: 1.8em}
.product-title{padding: 1.05rem 0 .55rem 0;
  h2{position: relative; padding-left: .22rem; font-size: .38rem;
    &:before{@include before(); left: 0; top: 50%; width: .07rem; height: .4rem; margin-top: -.2rem; background: $red}
  }
}

.p-title2 h2{position: relative; font-size: .46rem; padding-bottom: .32rem;
  &:before{@include before(); left: 0; bottom: 0; width: .4rem; height: .07rem; background: $red}
}

.product-1{
  .p-title2{padding: 1.55rem 0 .43rem 0}
  .p-content{padding-bottom: 1rem}
  .btn{height: .75rem; border-bottom: #ccc solid 1px;
    ul{@extend .flex; @extend .justifyCenter}
    a{display: block; height: .75rem; position: relative; padding: 0 .55rem; font-size: .28rem; color: #666; font-weight: 600;
      &:before{@include before(); left: .55rem; right: .55rem; bottom: 0; height: 1px; background: $red; opacity: 0}
      &:hover, &.on{color: $red;
        &:before{opacity: 1}
      }
    }
  }
}

.product-2{position: relative; padding-bottom: 1rem; min-height: 7.1rem;
  .p-title{padding: 1rem 0 .95rem 0}
  .scroll{max-width: 5.8rem; height: 3.7rem; overflow: hidden; position: relative; color: #666;
    h3{position: relative; font-size: .28rem; line-height: 1em; padding-left: .2rem;
      &:before{@include before(); left: 0; top: 50%; margin-top: -.14rem; width: .04rem; height: .28rem; background: $red}
    }
    .list{padding: .2rem 0; min-height: 2.6rem;
      dd{position: relative; padding: 0 .17rem; line-height: .32rem; font-size: .18rem;
        &:before{@include before(); left: 0; top: 50%; margin-top: -.02rem; width: .04rem; height: .04rem; background: #999}
      }
    }
  }
  .img{width: 5.77rem; @include absolute($t:1.05rem, $r:0)}
}

.product-3{min-height: 7.2rem; background: #f0f0f0;
  .p-title{padding: .9rem 0 .75rem 0}
  ul{@extend .flexWrap; @extend .flexBetween}
  li{width: 5.55rem; min-height: 1.55rem; position: relative; padding: 0 0 .6rem .72rem; color: #666;
    .ico{width: .55rem; @include absolute($l:0, $t:0)}
    h3{font-size: .28rem; line-height: .5rem; padding-bottom: .15rem}
  }
}

.product-4{border-bottom: #ccc solid 1px; padding-bottom: .8rem;
  .list{width: 100%; overflow: hidden; position: relative;
    li{position: relative;
      img{width: 100%}
    }
    .content{@include absolute($l:0, $t:0, $r:0, $b:0); @extend .flexColumn; @extend .itemsCenter; @extend .justifyCenter; text-align: center; color: #fff; font-size: .24rem; line-height: 1.8em}
    .num{@include absolute($r:.35rem, $b:.2rem); color: #fff; font-size: .18rem;
      .num-curr{font-size: .46rem}
    }
  }
}

.product-5{text-align: center;
  .title{font-size: .32rem; color: #666; padding: .7rem 0 .8rem 0; position: relative;
    &:before{@include before(); left: 50%; bottom: .55rem; width: .4rem; height: 1px; background: $red; margin-left: -.2rem}
  }
  .list{min-height: 2.1rem;
    ul{@extend .flexWrap; @extend .justifyCenter}
    li{width: 2.22rem; @extend .transition; color: #666; cursor: pointer;
      .ico{width: .72rem; height: .72rem; margin: 0 auto; @include radius(50%); position: relative; border: #ccc solid 1px; @extend .transition;
        img:nth-child(2){@include absolute($l:0, $t:0); opacity: 0}
      }
      .name{font-size: .16rem; line-height: .6rem}
    }
    li:hover{color: $red;
      .ico{border-color: $red;
        img:nth-child(1){opacity: 0}
        img:nth-child(2){opacity: 1}
      }
    }
  }
}

.lyb-layer .container, .report{
  .form{
    ul{@extend .flexWrap; @extend .flexBetween}
    li{width: 3.25rem; padding-bottom: .45rem; position: relative;
      .ico{width: .22rem; height: .22rem; @include absolute($l:0, $t:.16rem);
        img:nth-child(2){@include absolute($l:0, $t:0); opacity: 0}
      }
      .name{position: absolute; left: .3rem; top: 0; line-height: .54rem; font-size: .16rem; color: #999;
        em{color: $red}
      }
      .input{min-height: .55rem; border-bottom: #ccc solid 1px; position: relative; @extend .transition;
        input, textarea{width: 100%; height: .54rem; line-height: .54rem; padding-left: .3rem; color: $red; font-size: .16rem}
        textarea{height: 1.1rem; line-height: .24rem; padding: .15rem 0 .15rem .3rem}
      }
      .select{
        &:before{@include before(); top: 0; right: 0; bottom: 0; width: .23rem; background: url("../image/select23.png") center no-repeat; background-size: 100%}
        dl{@include absolute($l:0, $t:100%, $r:0); border: #ccc solid 1px; background: #fff; border-bottom: 0; display: none; max-height: 2.2rem; overflow-y: auto}
        dd{line-height: .44rem; padding: 0 .29rem; border-bottom: #ccc solid 1px; @extend .transition; color: #999; font-size: .16rem;
          &:hover{color: $red; border-color: $red}
        }
        span{display: block; line-height: .54rem; padding-left: .3rem; font-size: .16rem; color: $red}
        &.on{
          &:before{@include rotate(180deg)}
          dl{display: block}
        }
      }
    }
    li.on{
      .ico{
        img:nth-child(1){opacity: 0}
        img:nth-child(2){opacity: 1}
      }
      .name{display: none}
      .input{border-color: $red}
    }
    li.li_01{width: 100%}
  }
  .submit{padding-top: .1rem;
    div{background: $red; @extend .transition;
      &:hover{background: $color}
    }
    input{width: 100%; height: .52rem; font-size: .16rem; color: #fff; cursor: pointer}
  }
}
.lyb-layer .container{padding: 0 .6rem .6rem;
  .title{text-align: center; padding: .45rem 0;
    h2{font-size: .28rem; padding-bottom: .15rem}
    p{color: #999; text-align: center}
  }
}
.lyb-layer-ok .container{width: 6.45rem; min-height: 2.88rem; text-align: center;
  h3{font-size: .28rem; padding: 1rem 0 .15rem 0}
  p{font-size: .18rem; color: #999}
}

.business, .business-2{
  .arrow{@extend .flex; position: relative; @extend .flexBetween; width: .68rem; height: .3rem;
    &:after{@include before(); left: 50%; top: 50%; width: 1px; height: .2rem; background: #ccc; margin-top: -.1rem}
    a{width: .3rem; height: .3rem; background: center no-repeat; background-size: .11rem;
      &.prev{background-image: url("../image/prev11.png");
        &:hover{background-image: url("../image/prev11on.png")}
      }
      &.next{background-image: url("../image/next11.png");
        &:hover{background-image: url("../image/next11on.png")}
      }
    }
  }
}
.business{position: relative; padding: 0 0 0 3.14rem; min-height: 5.84rem;
  h2{font-size: .46rem; @include absolute($l:0, $t:.95rem)}
  h3{font-size: .28rem; padding: 1.15rem 0 .3rem 0}
  .p-content{padding-bottom: .4rem; border-bottom: #ccc solid 1px}
  .btn{height: .95rem; @extend .flex; @extend .itemsCenter;
    h4{font-size: .18rem; padding-right: .2rem}
  }
  .list{width: 100%; overflow: hidden; position: relative; font-size: .18rem; color: #666;
    .list-wrapper{margin-right: -.3rem}
    dl{@extend .flexWrap; @extend .flexBetween; padding-right: .3rem}
    .num{color: $red; line-height: .4rem; padding-bottom: .1rem;
      b{font-size: .48rem; display: inline-block; position: relative; top: .02rem; padding-right: .06rem}
    }
  }
}

.business-2{background: url("../image/business-2.jpg") center no-repeat; background-size: cover; min-height: 7.97rem; color: #fff;
  .title{@extend .flex; @extend .itemsCenter; height: 1.9rem;
    h2{font-size: .46rem}
    .arrow{margin-left: .2rem; opacity: 0; visibility: hidden;
      &:after{background: #fff}
      a{
        &.prev{background-image: url("../image/prev11_1.png");
          &:hover{background-image: url("../image/prev11on.png")}
        }
        &.next{background-image: url("../image/next11_1.png");
          &:hover{background-image: url("../image/next11on.png")}
        }
      }
    }
  }
  .list{width: 100%; overflow: hidden; position: relative;
    .list-wrapper{margin-left: -.55rem}
    li{padding: 0 0 .55rem .55rem; @extend .transition;
      .img{width: 100%; overflow: hidden; position: relative}
      .container{padding: .4rem 0 0 .24rem; position: relative;
        &:before{@include before(); left: 0; top: .43rem; width: 1px; height: 2.1rem; background: rgba(255, 255, 255, .5)}
      }
      .name{
        a{font-weight: bold; font-size: .2rem; display: block; line-height: .27rem; height: .54rem; overflow: hidden; color: #fff}
      }
      .time{font-size: .12rem; line-height: .3rem}
      p{font-size: .16rem; line-height: .22rem; padding: .2rem 0; min-height: 1rem}
    }
    li:hover{color: $red;
      .img img{@include scale()}
      .container:before{background: $red}
      .name a{color: $red}
    }
  }
}
.business-2-3{background: none; min-height: 3rem; color: #333;
  .title{height: 1rem; padding-bottom: .5rem}
  .list{
    li{
      .container:before{background: #dcdcdc}
      .name a{color: #333}
    }
  }
}
.business-2-2{background: none; color: #666;
  .title{height: 1.15rem;
    h3{padding-left: .18rem; font-size: .28rem; position: relative; color: #333;
      &:before{@include before(); left: 0; top: 50%; width: .04rem; height: .26rem; background: $red; margin-top: -.13rem}
    }
    .arrow{
      &:after{background: #ccc}
      a{
        &.prev{background-image: url("../image/prev11.png");
          &:hover{background-image: url("../image/prev11on.png")}
        }
        &.next{background-image: url("../image/next11.png");
          &:hover{background-image: url("../image/next11on.png")}
        }
      }
    }
  }
  .list li{
    .container:before{background: #ccc}
    .name a{color: #666}
  }
}

.business-3{
  h2{font-size: .46rem; padding: .95rem 0 .75rem 0}
  .list{
    ul{@extend .flexWrap; margin-left: -.55rem}
    li{width: 33.333%; padding: 0 0 .5rem .55rem}
    a{display: block; position: relative; color: #fff;
      .img{width: 100%; overflow: hidden; position: relative;
        &:before{@include before(); z-index: 2; left: 0; bottom: 0; right: 0; top: 0; background: url("../image/bg20-1.png") center bottom repeat-x; background-size: auto 1.79rem}
      }
      .layer{@include absolute($l:.25rem, $b:0, $r:.25rem);
        .name{font-size: .2rem; line-height: .3rem; font-weight: 600; padding-bottom: .03rem}
        .btn{height: .75rem; font-size: .2rem; @extend .transition; @extend .flex; @extend .itemsCenter;
          &:before{@include before(); position: relative; width: .4rem; height: .4rem; border: #fff solid 1px; background: url("../image/img38.png") center no-repeat; background-size: 100%; @include radius(50%); margin-right: .1rem}
          &:hover{color: $red;
            &:before{border-color: $red; background-color: $red}
          }
        }
      }
    }
    a:hover .img img{@include scale()}
  }
}

.business-4, .business-5{
  .arrow a{display: block; width: .31rem; @include absolute($t:0, $b:0); background: center no-repeat; background-size: 100%;
    &.prev{left: 50%; margin-left: -7.15rem; background-image: url("../image/prev31.png");
      &:hover{background-image: url("../image/prev31on.png")}
    }
    &.next{right: 50%; margin-right: -7.15rem; background-image: url("../image/next31.png");
      &:hover{background-image: url("../image/next31on.png")}
    }
  }
}

.business-4{
  h2{font-size: .46rem; padding: .5rem 0 .6rem 0}
  .list{width: 100%; overflow: hidden; position: relative;
    li a{@extend .flex; @extend .itemsCenter; @extend .justifyCenter; background: center no-repeat; background-size: cover; text-align: center; color: #fff; height: 6rem;
      .name{font-size: .51rem; font-weight: bold; position: relative; padding-bottom: .3rem;
        &:before{@include before(); left: 50%; bottom: 0; width: .5rem; height: .04rem; background: $red; margin-left: -.25rem}
      }
    }
  }
}

.business-5{padding-bottom: 1.1rem;
  h2{font-size: .46rem; padding: .95rem 0 .6rem 0}
  .list{position: relative; margin-left: -.275rem; margin-right: -.275rem;
    .list-wrapper{width: 100%; overflow: hidden; position: relative}
    li{padding: 0 .275rem; position: relative;
      .img a{width: 100%; overflow: hidden; position: relative; display: block;
        &:before{@include before(); z-index: 2; left: 0; right: 0; top: 0; bottom: 0; background: url("../image/bg20-2.png") center bottom repeat-x; background-size: auto 1.27rem}
      }
      .name a{display: block; @include absolute($l:.275rem, $b:.25rem, $r:.275rem); color: #fff; font-size: .18rem; line-height: .25rem; padding: 0 .2rem}
    }
    li:hover .img a{
      img{@include scale()}
      &:before{background-image: url("../image/bg20-2on.png")}
    }
  }
  .arrow a{
    &.prev{background-image: url("../image/prev31_1.png");
      &:hover{background-image: url("../image/prev31on.png")}
    }
    &.next{background-image: url("../image/next31_1.png");
      &:hover{background-image: url("../image/next31on.png")}
    }
  }
}

.report{position: relative;
  &:before{@include before(); left: -.45rem; top: 0; bottom: 0; width: 50%; background: #dfdfdf}
  .head{@include absolute($l:0, $t:0, $r:0); height: .95rem;
    a{display: block; @include absolute($l:.5rem, $t:0, $b:0); background: url("../image/logo2.png") center no-repeat; background-size: 100%; width: 1.7rem}
  }
  .wal{min-height: 70vh; position: relative; padding: 1.5rem 0 1rem 0; @extend .flexWrap; @extend .flexBetween}
  .side{width: 5.4rem;
    h2{font-size: .28rem; line-height: .42rem; position: relative; padding-bottom: .65rem;
      &:before{@include before(); left: 0; bottom: .3rem; width: .5rem; height: .04rem; background: $red}
    }
    .content{font-size: .16rem; line-height: .3rem; color: #666;
      a{color: $red}
    }
    .msg{font-weight: bold; font-size: .18rem; color: #666; padding: .33rem 0; border-bottom: #999 dashed 1px}
    h3{font-size: .18rem; padding: .48rem 0 .2rem 0}
  }
  .container{width: 6.25rem;
    .title{border-bottom: #999 dashed 1px;
      h2{font-size: .28rem}
      p{font-size: .16rem; color: #999; padding: .1rem 0 .26rem 0}
    }
    .form{padding-top: .5rem;
      li{width: 2.86rem}
    }
    .submit{width: 2.86rem; padding-bottom: .55rem}
    .btn{padding-top: .5rem; border-top: #ccc dashed 1px;
      a{display: block; height: .83rem; line-height: .83rem; text-align: center; background: #d8d8d8; font-size: .18rem; color: #999; cursor: default}
      a.on{background: $red; color: #fff; cursor: pointer}
    }
    .list{
      h3{font-size: .18rem; position: relative; padding: .5rem 0 .15rem 0;
        a{@include absolute($t:.5rem, $r:0); font-weight: 400; color: $red}
      }
      li{line-height: .52rem; border-bottom: #ccc solid 1px; font-size: .18rem; @extend .flex; color: #666;
        .name{width: 3.15rem}
      }
    }
    .list2{font-size: .18rem; line-height: .3rem; color: #666; padding: .6rem 0;
      .red{color: $red}
      h3{font-size: .18rem; padding-bottom: .22rem}
      dl{padding: .08rem 0 .18rem 0; line-height: .33rem;
        dd{padding-left: .38rem; background: url("../image/img20.png") left center no-repeat; background-size: .2rem;
          &.on{background-image: url("../image/img20on.png")}
        }
        &.radio{@extend .flex;
          dd{padding-right: .48rem; background-image: url("../image/img20_1.png");
            &.on{background-image: url("../image/img20_1on.png")}
          }
        }
      }
    }
  }
}

.programme-1{
  .p-title2{padding: 1.05rem 0 .4rem 0}
  .content{padding-bottom: .2rem}
  .p-title3{line-height: 1rem}
  .list{
    ul{@extend .flexWrap; @extend .flexBetween}
    li{width: 5.78rem; position: relative; padding-bottom: .3rem;
      .ico{width: .64rem; @include absolute($l:.14rem, $t:.16rem)}
      .p-content{min-height: .95rem; padding: .15rem .15rem .15rem 1.07rem; background: #f0f0f0; @extend .flexColumn; @extend .justifyCenter}
    }
  }
}

.p-title3{padding-left: .18rem; line-height: .7rem; font-size: .28rem; color: #666; position: relative;
  &:before{@include before(); left: 0; top: 50%; width: .04rem; height: .26rem; background: $red; margin-top: -.13rem}
}

.programme-2{
  .p-title2{padding: .5rem 0 .35rem 0}
  .p-content{padding: 0 0 .7rem .18rem}
}

.programme-3{background: #f0f0f0;
  .wal{min-height: 3.87rem; position: relative; padding: .65rem 0}
  .p-content{padding: 0 0 .3rem .18rem; max-width: 5.3rem}
  .img{width: 4.94rem; @include absolute($t:.5rem, $r:0)}
}

.programme-4{padding: .4rem 0 1.2rem 0;
  .p-content{padding: 0 0 .7rem .18rem}
  .img{margin-left: -1px}
}

.programme-5{background: url("../image/programme-5.jpg") center no-repeat; background-size: cover; min-height: 5.52rem; color: #fff; padding: 1rem 0;
  .p-content{color: #fff; padding: .32rem 0 .28rem 0}
  .list{
    ul{@extend .flexWrap}
    li{font-size: .18rem; line-height: .42rem; position: relative; min-width: 4.4rem; padding-left: .2rem;
      &:before{@include before(); left: 0; top: 50%; width: .09rem; height: .09rem; margin-top: -.045rem; background: #ccc}
    }
  }
}

.programme-6{padding: .35rem 0 .9rem; position: relative; border-bottom: #ccc solid 1px;
  .p-title3{line-height: 1.45rem}
  .btn{@include absolute($l:1.88rem, $t:.35rem);
    ul{@extend .flex}
    li{height: 1.45rem; line-height: 1.45rem; position: relative; margin-right: .25rem; font-size: .28rem; color: #666; @extend .transition; font-weight: bold; cursor: pointer}
    li:hover, li.on{color: $red}
  }
  .list{
    ul{@extend .flexWrap; @extend .flexBetween}
    li{width: 5.78rem}
    a{@extend .flex; @extend .itemsCenter; color: #666; font-size: .28rem; background: #f0f0f0; height: 1.8rem; padding: .2rem;
      .img{width: 1.28rem}
      .name{margin-left: .73rem; padding-bottom: .38rem; background: url("../image/img86.png") left bottom no-repeat; background-size: .86rem}
    }
    a:hover{color: $red;
      .name{background-image: url("../image/img86on.png")}
    }
  }
}

.case-1{padding: .85rem 0; background: #f5f5f5;
  .wal{@extend .flexWrap; @extend .flexBetween}
  .col{width: 5.78rem;
    .p-title2{padding: .7rem 0 1.1rem 0}
    .list li{position: relative; padding: 0 0 .32rem .3rem; letter-spacing: .01rem;
      &:before{@include before(); left: 0; top: .12rem; width: .09rem; height: .09rem; background: #ccc}
    }
  }
  .img{width: 5.79rem}
}

.case-2{padding: 1rem 0;
  .p-title2{padding-bottom: .5rem}
  .list{
    ul{@extend .flexWrap; @extend .flexBetween; position: relative}
    li{position: relative; padding: 0 0 .32rem .3rem; width: 5.79rem;
      &:before{@include before(); left: 0; top: .12rem; width: .09rem; height: .09rem; background: #ccc}
    }
  }
}

.about-banner{height: 9.5rem; overflow: hidden; position: relative;
  video{@include absolute($l:50%, $t:50%); min-width: 100%; min-height: 100%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
  }
  a.btn{position: relative; z-index: 11}
}

.about-1{padding: 1.45rem 0 1.45rem 3.15rem; position: relative;
  h2{@include absolute($l:0, $t:1.45rem); font-size: .46rem; line-height: 1em}
  .p-content{min-height: 1.85rem; padding-bottom: .3rem}
  .list{position: relative;
    &:after{@include before(); top: .08rem; left: 4.05rem; width: 1px; height: .8rem; background: $red}
    ul{@extend .flexWrap; @extend .flexBetween}
    li{width: 3.63rem; font-size: .24rem; padding-bottom: .3rem;
      h3{font-size: .32rem; padding-bottom: .16rem}
    }
  }
}

.about-2{background: url("../image/about-2.jpg") center no-repeat; background-size: cover; min-height: 6.82rem; color: #fff;
  ul{@extend .flexWrap; border-right: rgba(255, 255, 255, .5) solid 1px}
  li{width: 25%; height: 6.82rem; @extend .flexColumn; @extend .justifyCenter; border-left: rgba(255, 255, 255, .5) solid 1px; padding: 0 .2rem; @extend .transition;
    h2{font-size: .26rem; position: relative; height: 1.3rem; @extend .flex; @extend .itemsCenter;
      &:before{@include before(); left: -.2rem; margin-left: -1px; top: 50%; width: 1px; height: .26rem; margin-top: -.13rem; background: $red; opacity: 0}
      &:after{@include before(); position: relative; width: .4rem; height: .25rem; background: url("../image/img25.png") center no-repeat; background-size: .25rem; opacity: 0; @extend .transition; display: none}
    }
    .content{font-size: .16rem; line-height: 1.8em; height: 0; @extend .transition; overflow: hidden; margin-right: -.1rem}
    .scroll{height: 10.8em; overflow: hidden; position: relative;
      p{padding-right: .1rem}
    }
  }
  li.on{
    h2:before{opacity: 1}
    .content{height: 10.8em}
  }
}

.about-3{width: 100%; overflow: hidden; position: relative;
  h2{font-size: .46rem; padding: .95rem 0 .3rem}
  .bg{background: url("../image/img1920_6.jpg") center no-repeat; background-size: cover; min-height: 6.29rem; text-align: center; color: #fff; position: relative}
  .list{
    li{position: relative;
      .time, .time2{font-family: 'Oswald'; font-size: .4rem; line-height: .8rem}
      .time{font-size: 1.53rem; opacity: .1; position: absolute; left: 0; top: 0; right: 0; line-height: 3.1rem}
      .name{font-size: .24rem; line-height: .36rem; position: relative; padding: 1.65rem 0 .2rem 0;
        &:before{@include before(); left: 50%; bottom: 0; width: .5rem; height: .02rem; background: $red; margin-left: -.25rem}
      }
    }
  }
  .list2{@include absolute($l:-1rem, $t:4.25rem, $r:-1rem); border-top: #fff dotted 1px; @include rotate(-9deg);
    transform-origin: center top;
    -webkit-transform-origin: center top;
    .line{position: absolute; left: 0; top: -1px; width: 0; height: 1px; background: $red; @extend .transition}
    .list-wrapper{width: 13rem; margin: 0 auto; overflow: hidden; position: relative; top: -.1rem}
    li{position: relative; @include rotate(9deg); z-index: 2;
      transform-origin: center top;
      -webkit-transform-origin: center top;
      &:before{@include before(); left: 50%; top: 0; margin-left: -.1rem; width: .2rem; height: .2rem; background: url("../image/img20_2.png") center no-repeat; background-size: 100%}
      div{font-size: .18rem; padding: .32rem 0 .2rem 0; position: relative;
        &:before{@include before(); left: 50%; top: .13rem; width: 1px; height: .14rem; background: rgba(255, 255, 255, .5)}
      }
    }
    li.on{
      &:before{background-image: url("../image/img20_2on.png")}
      div{color: $color;
        &:before{background: $red}
      }
    }
  }
  .arrow a{display: block; width: .4rem; height: 1rem; background: rgba(0, 0, 0, .5) center no-repeat; background-size: 100%; @include absolute($t:50%); margin-top: -.5rem;
    &:hover{background-color: rgba(198, 21, 29, .5)}
    &.prev{left: 50%; margin-left: -6.8rem; background-image: url("../image/prev40.png")}
    &.next{right: 50%; margin-right: -6.8rem; background-image: url("../image/next40.png")}
  }
}

.about-4{padding-bottom: 1rem; overflow: hidden; position: relative;
  h2{font-size: .46rem; padding: .7rem 0 .5rem}
  .list{min-height: 4.59rem; position: relative;
    .bg{position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: center no-repeat; background-size: cover; opacity: 0;
      &.show{opacity: 1}
    }
    ul{@extend .flex; position: relative; z-index: 11}
    li{height: 4.59rem; width: 14.285%; border-right: rgba(255, 255, 255, .5) solid 1px; @extend .flexColumn; @extend .justifyCenter; @extend .itemsCenter; color: #fff; font-size: .18rem; line-height: .26rem; @extend .transition; position: relative;
      .name{width: 2em; @extend .transition; position: relative; top: 0}
      .layer{@include absolute($l:0); width: 100%; min-width: 3rem; padding: 0 .5rem; opacity: 0; @extend .transition;
        h3{font-size: .18rem}
      }
    }
    li:last-child{border: 0}
    li.on{width: 30%; flex-shrink: 0; -webkit-flex-shrink: 0;
      .name{opacity: 0}
      .layer{opacity: 1}
    }
  }
}

.p-nav{border-bottom: #ccc solid 1px;
  dl{@extend .flex; @extend .justifyCenter}
  a{display: block; height: 1.47rem; padding: .75rem .56rem 0 .56rem; position: relative; font-size: .28rem; font-weight: bold; color: #666;
    &:before{@include before(); left: 50%; bottom: -1px; right: 50%; height: 1px; background: $red}
    &:hover, &.on{color: $red;
      &:before{left: .56rem; right: .56rem}
    }
  }
}

.news-1{padding: .8rem 0 0 0;
  ul{@extend .flexWrap; margin-left: -.55rem}
  li{width: 50%; padding: 0 0 .55rem .55rem}
  a{display: block; position: relative; color: #fff;
    &:before{@include before(); left: 0; top: 0; right: 0; bottom: 0; background: url("../image/bg20-3.png") center bottom repeat-x; background-size: auto .75rem; z-index: 2}
    .img{width: 100%; overflow: hidden; position: relative;
      img{width: 100%}
    }
    .time{@include absolute($l:.3rem, $t:0); width: .8rem; height: .88rem; font-size: .12rem; text-align: center; background: $red; padding-top: .13rem;
      span{display: block; font-size: .42rem; line-height: .5rem}
    }
    .name{@include absolute($l:.3rem, $r:.3rem, $b:.24rem); font-size: .2rem; line-height: .27rem; font-weight: bold}
  }
  a:hover .img img{@include scale()}
}

.news{
  .p-title3{line-height: 1.15rem}
  ul{@extend .flexWrap; margin-left: -.55rem}
  li{width: 33.333%; padding: 0 0 .8rem .55rem; @extend .transition;
    .img{width: 100%; overflow: hidden; position: relative}
    .container{padding: .4rem 0 0 .24rem; position: relative;
      &:before{@include before(); left: 0; top: .43rem; width: 1px; height: 2.1rem; background: #ccc}
    }
    .name{
      a{font-weight: bold; font-size: .2rem; display: block; line-height: .27rem; height: .54rem; overflow: hidden; color: #666}
    }
    .time{font-size: .12rem; line-height: .3rem}
    p{font-size: .16rem; line-height: .22rem; padding: .2rem 0; min-height: 1rem}
  }
  li:hover{color: $red;
    .img img{@include scale()}
    .container:before{background: $red}
    .name a{color: $red}
  }
}

.p-btn{padding-bottom: 1rem;
  a{display: block; text-align: center; line-height: .56rem; background: #f0f0f0; font-size: .16rem; color: #666;
    &:hover{background: $red; color: #fff}
  }
}

.news-show{position: relative; min-height: 5rem; color: #666;
  .title{font-size: .32rem; line-height: .49rem; padding: .65rem 1.3rem 0 0}
  .time{line-height: .6rem; position: relative; z-index: 11; font-size: .13rem;
    &:before{@include before(); left: 0; bottom: -1px; width: .73rem; height: 1px; background: $red}
  }
  .p-content{border-top: #ccc solid 1px; border-bottom: #ccc solid 1px; padding: .6rem 0;
    .img{text-align: center; padding: .45rem 0}
  }
  a.back{@include absolute($t:1.25rem, $r:0)}
  div.back{padding-top: .5rem;
    a.p-more{margin-left: auto}
  }
}

.law{padding: 1rem 0 .5rem 0;
  .p-title2{padding-bottom: .35rem}
  .p-content{padding-bottom: .5rem}
}

.join-1{padding-top: .9rem;
  ul{@extend .flexWrap; @extend .flexBetween}
  li{@extend .flex; @extend .itemsCenter; width: 5.78rem; height: 1.87rem; background: #f0f0f0; padding-left: 1rem; position: relative;
    .ico{width: 1.15rem; margin-right: .6rem}
    .name{font-size: .28rem; font-weight: bold; color: #666; @extend .transition}
    a.p-more{font-size: .16rem; width: 1.2rem}
    a.btn{display: block; @include absolute($l:0, $t:0, $r:0, $b:0)}
  }
  li:hover{
    .name{color: $red}
    a.p-more{color: $red;
      &:before{background-image: url("../image/img56.png"); width: .56rem; right: -.2rem}
    }
  }
}

.join-title{text-align: center; padding: .85rem 0 1.15rem 0; font-size: .46rem}

.join-2{width: 100%; overflow: hidden; position: relative;
  .wal{min-height: 5rem; position: relative;
    &:before{@include before(); left: 0; top: 4.8rem; right: -3.35rem; bottom: 1.45rem; background: #f7f7f7}
  }
  li{@extend .flexWrap; @extend .flexBetween;
    .img{width: 5.78rem}
    .col{width: 5.78rem}
    .title{padding-bottom: .65rem;
      h3{position: relative; font-size: .46rem; padding-left: .2rem; line-height: 1em;
        &:before{@include before(); left: 0; top: 50%; width: .07rem; height: .4rem; background: $red; margin-top: -.2rem}
      }
    }
    h4{color: #666; padding-bottom: .2rem; font-size: .28rem}
    .p-content{padding-bottom: .6rem; max-width: 4.95rem}
  }
  li.li_01{padding-bottom: .5rem}
  li.li_02{
    .img{order: -1;
      div{margin-left: -3.35rem}
    }
  }
  li.li_03{
    .title{padding: 1.15rem 0 .35rem 0}
    .p-content{padding: 0}
    .img div{margin-right: -3.35rem}
  }
}

.join-3{padding-bottom: 1.2rem;
  .join-title{padding: 1.35rem 0 .75rem 0}
  .list{width: 100%; overflow: hidden; position: relative;
    li img{width: 100%}
    .num{@include absolute($r:.35rem, $b:.2rem); color: #fff; font-size: .18rem;
      .num-curr{font-size: .46rem}
    }
  }
  .arrow a{display: block; width: .4rem; height: 1rem; background: rgba(0, 0, 0, .5) center no-repeat; background-size: 100%; @include absolute($t:50%); margin-top: -.5rem;
    &:hover{background-color: rgba(198, 21, 29, .5)}
    &.prev{left: 0; background-image: url("../image/prev40.png")}
    &.next{right: 0; background-image: url("../image/next40.png")}
  }
}

.video-layer{
  video{width: 100%}
}

.ewm-layer{position: fixed; z-index: 100; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, .6); @extend .flex; @extend .itemsCenter; @extend .justifyCenter; @extend .transition; opacity: 0; visibility: hidden;
  &.show{opacity: 1; visibility: visible}
  .container{background: #fff; width: 6.2rem; height: 7.4rem; @include radius(.1rem); @extend .flexColumn; @extend .itemsCenter; @extend .justifyCenter; text-align: center; position: relative;
    a.close{display: block; width: .9rem; height: .9rem; background: url("../image/close42.png") center no-repeat; background-size: .42rem; @include absolute($t:0, $r:0)}
    .img{width: 3.57rem;
      img{width: 100%}
    }
    .name{font-size: .32rem; font-weight: bold; padding: .5rem 0 .2rem 0}
    p{font-size: .28rem; color: #666; line-height: 1.8em}
  }
}

.technology-1{
  .p-title{padding: 1.3rem 0 .85rem 0}
  .bg{background: url("../image/img1920_7.jpg") center no-repeat; background-size: cover;
    .wal{min-height: 7rem; position: relative}
  }
  .btn{
    dl{@include absolute($t:0, $r:-1.55rem, $b:0, $z:12); width: 1.8rem; @extend .flexColumn; @extend .itemsCenter; @extend .justifyCenter}
    dd{padding: .1rem 0; position: relative; width: 1.26rem; @extend .transition; cursor: pointer;
      img{width: 100%; border: #fff solid .02rem}
    }
    dd.on{width: 1.8rem;
      img{border-color: $red}
    }
  }
  .list{height: 7rem; position: relative;
    li{@include absolute($l:0, $t:0, $r:0, $b:0); opacity: 0; visibility: hidden;
      div.title{@include absolute($l:0, $t:-1rem, $r:0); text-align: center; font-size: .18rem; @extend .transition; opacity: 0;
        h2{font-size: .28rem; font-weight: 400; padding: .75rem 0 .22rem 0}
      }
      &.show{opacity: 1; visibility: visible}
      &.in .title{opacity: 1; top: 0}
    }
    /**/
    li.li_01{
      .line{background: url("../image/img1012.png") left top no-repeat; background-size: auto 4.09rem; @include absolute($l:0, $t:1.94rem); width: 0; height: 4.09rem; @extend .transition; @include duration(2.5s)}
      dt, dd{
        &:before, &:after{@include before(); left: 0; top: 0; right: 0; bottom: 0; background: center no-repeat; background-size: 100%}
        &:before{
          animation: rotate-anim 9s infinite linear;
          -webkit-animation: rotate-anim 9s infinite linear;
        }
        &:after{
          animation: rotate-anim2 9s infinite linear;
          -webkit-animation: rotate-anim2 9s infinite linear;
        }
      }
      dt{@include absolute($l:.3rem, $t:2.23rem); background: url("../image/img352.png") center no-repeat; background-size: 100%; width: 3.52rem; height: 3.52rem; line-height: 3.52rem; text-align: center; color: $red; font-size: .35rem; font-weight: bold; letter-spacing: .04rem; opacity: 0; @extend .transition; @include scale(.5);
        &:before{background-image: url("../image/img310_1.png"); background-size: 3.1rem}
        &:after{background-image: url("../image/img310_2.png"); background-size: 3.1rem}
      }
      dd{width: 1.66rem; height: 1.66rem; background: url("../image/img166.png") center no-repeat; background-size: 100%; @include absolute(); @extend .flexColumn; @extend .itemsCenter; @extend .justifyCenter; color: $red; opacity: 0; @extend .transition; @include scale(.5); @include duration(.8s);
        &:before{background-image: url("../image/img166_1.png")}
        &:after{background-image: url("../image/img166_2.png")}
        img{width: .4rem}
        div{font-size: .16rem; padding-top: .08rem; line-height: 1em}
      }
      dd.dd_01{left: 5.28rem; top: 2.26rem; margin-left: -4.1rem; margin-top: 1rem}
      dd.dd_02{left: 7.25rem; top: 4.13rem; margin-left: -6.1rem; margin-top: -.88rem}
      dd.dd_03{left: 9.14rem; top: 3.15rem; margin-left: -7.98rem}
    }
    li.li_01.in{
      .line{width: 100%}
      dt, dd{opacity: 1; @include scale(1)}
      dt{@include delay(.5s)}
      dd{margin-left: 0; margin-top: 0}
      dd.dd_01{@include delay(1s)}
      dd.dd_02{@include delay(1.3s)}
      dd.dd_03{@include delay(1.6s)}
    }
    li.li_01.out{
      .line{@include delay(.5s)}
      dt{@include delay(.9s)}
      dd.dd_01{@include delay(.6s)}
      dd.dd_02{@include delay(.3s)}
    }
    /**/
    li.li_02{
      .light{width: 9.4rem; height: 4.79rem; @include absolute($l:50%, $t:1.3rem); margin-left: -4.7rem; @extend .transition; opacity: 0;
        canvas{width: 100%}
      }
      h2.title{color: $red; text-align: center; @include absolute($l:0, $r:0, $t:2.4rem); font-size: .4rem; line-height: .5rem; @extend .transition; opacity: 0; margin-top: 1rem}
      dd{@include absolute($l:50%, $t:3.5rem); margin-left: -.65rem; background: url("../image/img129.png") center no-repeat; background-size: 100%; width: 1.29rem; height: 1.59rem; @extend .flexColumn; @extend .itemsCenter; @extend .justifyCenter; text-align: center; color: $red; padding-bottom: .3rem; font-size: .2rem; line-height: .24rem; @extend .transition; opacity: 0; @include scale(.5); @include duration(1s);
        animation: upDown 3s infinite linear;
        -webkit-animation: upDown 3s infinite linear;
      }
      dd.dd_04{font-size: .14rem; line-height: .19rem}
    }
    li.li_02.in{
      .light{opacity: 1}
      h2.title{opacity: 1; margin-top: 0; @include delay(.5s)}
      dd{opacity: 1; @include scale(1)}
      dd.dd_01{margin-left: -5.2rem; top: 3.4rem; @include delay(1s)}
      dd.dd_02{margin-left: -3.26rem; top: 1.8rem; @include delay(1.2s)}
      dd.dd_03{margin-left: 2.1rem; top: 1.8rem; @include delay(1.4s)}
      dd.dd_04{margin-left: 3.92rem; top: 3.4rem; @include delay(1.5s)}
      dd.dd_05{margin-left: -.65rem; top: 4.52rem; @include delay(1.8s)}
    }
    li.li_02.out{
      .light{@include delay(1.5s)}
      h2.title{@include delay(1.2s)}
      dd.dd_01{@include delay(.8s)}
      dd.dd_02{@include delay(.6s)}
      dd.dd_03{@include delay(.4s)}
      dd.dd_04{@include delay(.2s)}
    }
    /**/
    li.li_03{
      .yuan{background: url("../image/img464.png") center no-repeat; background-size: 100%; width: 4.64rem; height: 4.64rem; @include absolute($l:50%, $t:1.56rem); margin-left: -2.32rem; @extend .transition; opacity: 0; @include scale(.5)}
      dd{@include absolute($l:50%, $t:3.65rem); margin-left: -1.71rem; font-size: .31rem; color: $red; text-align: center; background: url("../image/img342.png") center no-repeat; background-size: 100%; width: 3.42rem; height: .73rem; line-height: .73rem; padding-right: .38rem; @extend .transition; opacity: 0; @include scale(.2); @include duration(.6s);
        i{display: block; background: $red; @include radius(50%); @include absolute($r:.2rem, $t:50%); margin-top: -.15rem; width: .3rem; height: .3rem;
          animation: scale-anim 2s infinite linear;
          -webkit-animation: scale-anim 2s infinite linear;
        }
        i:nth-child(2){
          animation-delay: -1s;
          -webkit-animation-delay: -1s;
        }
      }
      dd.dd_02, dd.dd_03{background-image: url("../image/img342_1.png"); padding: 0 0 0 .38rem;
        i{right: auto; left: .2rem}
      }
    }
    li.li_03.in{
      .yuan{opacity: 1; @include scale(1)}
      dd{opacity: 1; @include scale(1)}
      dd.dd_01{top: 2.55rem; margin-left: -5.55rem; @include delay(.5s)}
      dd.dd_02{top: 2.55rem; margin-left: 2.1rem; @include delay(.7s)}
      dd.dd_03{top: 4.5rem; margin-left: 2.1rem; @include delay(.9s)}
      dd.dd_04{top: 4.5rem; margin-left: -5.55rem; @include delay(1.1s)}
    }
    li.li_03.out{
      .yuan{@include delay(1s)}
      dd.dd_01{@include delay(.6s)}
      dd.dd_02{@include delay(.4s)}
      dd.dd_03{@include delay(.2s)}
    }
    /**/
    li.li_04{
      .yuan{background: url("../image/img1404.png") center no-repeat; background-size: 100%; width: 14.04rem; height: 5rem; @include absolute($l:50%, $t:1.3rem); margin-left: -7.02rem; @extend .transition; opacity: 0; @include scale(.9); @include duration(1s); margin-top: .5rem}
      dl{@extend .flex; @extend .flexBetween; @include absolute($l:.8rem, $t:1.55rem, $r:.8rem)}
      dd{@extend .flexColumn; @extend .itemsCenter; @extend .justifyCenter; background: url("../image/img118.png") center no-repeat; background-size: 100%; width: 1.18rem; height: 1.19rem; position: relative; @extend .transition; opacity: 0; @include scale(.3); top: 2.2rem; @include duration(1s);
        animation: upDown 3s infinite linear;
        -webkit-animation: upDown 3s infinite linear;
        img{width: .5rem}
        .name{font-size: .16rem; padding-top: .1rem; text-align: center; color: $red}
      }
      dd.dd_01{left: 4.85rem}
      dd.dd_02{left: 3.25rem}
      dd.dd_03{left: 1.6rem}
      dd.dd_05{left: -1.6rem}
      dd.dd_06{left: -3.25rem}
      dd.dd_07{left: -4.85rem}
      dd:nth-child(odd){margin-top: .5rem;
        animation-delay: -1.5s;
        -webkit-animation-delay: -1.5s;
      }
    }
    li.li_04.in{
      .yuan{opacity: 1; @include scale(1); margin-top: 0}
      dd{opacity: 1; @include scale(1); left: 0; top: 0}
      dd.dd_04{@include delay(1s)}
      dd.dd_03, dd.dd_05{@include delay(1.2s)}
      dd.dd_02, dd.dd_06{@include delay(1.4s)}
      dd.dd_01, dd.dd_07{@include delay(1.6s)}
    }
    li.li_04.out{
      .yuan{@include delay(1s)}
      dd.dd_04{@include delay(.6s)}
      dd.dd_03, dd.dd_05{@include delay(.4s)}
      dd.dd_02, dd.dd_06{@include delay(.2s)}
    }
    /**/
    li.li_05{
      .yuan{background: url("../image/img899.png") center no-repeat; background-size: 100%; width: 8.99rem; height: 2.74rem; @include absolute($l:50%, $t:3.49rem); margin-left: -4.5rem; @extend .transition; opacity: 0; @include scale(.9); @include duration(1s); margin-top: .5rem}
      dl.dl_01{@extend .flex; @extend .justifyCenter; @include absolute($l:0, $t:1.67rem, $r:0);
        dd{position: relative; color: $red; width: .66rem; height: .8rem; font-size: .16rem; line-height: .21rem; text-align: center; top: 2rem; @extend .transition; @include scale(0); opacity: 0; @include duration(1s);
          animation: upDown 3s infinite linear;
          -webkit-animation: upDown 3s infinite linear;
          &:before{@include before(); left: 50%; top: 0; background: url("../image/img76.png") center no-repeat; background-size: 100%; width: .76rem; height: 1.45rem; margin-left: -.38rem}
          div{position: relative; padding-top: .18rem}
        }
        dd:nth-child(odd){
          animation-delay: -1.5s;
          -webkit-animation-delay: -1.5s;
        }
        dd.dd_01{left: 1.98rem}
        dd.dd_02{left: 1.32rem}
        dd.dd_03{left: .66rem}
        dd.dd_05{left: -.66rem}
        dd.dd_06{left: -1.32rem}
        dd.dd_07{left: -1.98rem}
      }
      dl.dl_02{@extend .flex; @extend .flexBetween; @include absolute($l:1.62rem, $t:4.7rem, $r:1.62rem);
        dd{background: url("../image/img129_1.png") center no-repeat; background-size: 100%; width: 1.29rem; height: 1.29rem; color: $red; text-align: center; font-size: .2rem; line-height: .24rem; padding-top: .42rem; position: relative; @extend .transition; opacity: 0; @include scale(0); @include duration(1s)}
        dd.dd_02{top: .78rem; background-image: url("../image/img129_2.png")}
        dd.dd_03{top: .79rem; background-image: url("../image/img129_3.png")}
        dd.dd_04{top: .08rem; background-image: url("../image/img129_4.png")}
      }
    }
    li.li_05.in{
      .yuan{opacity: 1; @include scale(1); margin-top: 0}
      dl.dl_02{
        dd{opacity: 1; @include scale(1)}
        dd.dd_02, dd.dd_03{@include delay(.8s)}
        dd.dd_01, dd.dd_04{@include delay(1s)}
      }
      dl.dl_01{
        dd{left: 0; top: 0; opacity: 1; @include scale(1)}
        dd.dd_01, dd.dd_07{top: .3rem}
        dd.dd_02, dd.dd_04, dd.dd_06{top: .8rem}
        dd.dd_02{left: .1rem}
        dd.dd_06{left: -.1rem}
        dd.dd_04{@include delay(.6s)}
        dd.dd_03, dd.dd_05{@include delay(.8s)}
        dd.dd_02, dd.dd_06{@include delay(1s)}
        dd.dd_01, dd.dd_07{@include delay(1.2s)}
      }
    }
    li.li_05.out{
      .yuan{@include delay(1s)}
      dl.dl_02{
        dd.dd_02, dd.dd_03{@include delay(.2s)}
      }
      dl.dl_01{
        dd.dd_04{@include delay(.6s)}
        dd.dd_03, dd.dd_05{@include delay(.4s)}
        dd.dd_02, dd.dd_06{@include delay(.2s)}
      }
    }
  }
  .phone-list{display: none;
    li{padding-bottom: 3px}
  }
}
@media screen and (max-width: 1600px){
  .technology-1 .btn dl{right: -.8rem}
}

@keyframes scale-anim {
  0% {transform: scale(0); opacity: 0}
  50% {transform: scale(.6); opacity: 1}
  100% {transform: scale(1); opacity: 0}
}
@-webkit-keyframes scale-anim{
  0% {-webkit-transform: scale(0); opacity: 0}
  50% {-webkit-transform: scale(.6); opacity: 1}
  100% {-webkit-transform: scale(1); opacity: 0}
}

.business-6{background: #f0f0f0;
  h2{font-size: .46rem; line-height: 1em; padding: .4rem 0}
  .list{min-height: 6rem; position: relative;
    .bg{position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: center no-repeat; background-size: cover}
    ul{@extend .flex; margin-left: -1px}
    li{width: 25%; height: 6rem; border-left: rgba(255, 255, 255, .6) solid 1px; position: relative; z-index: 11; color: #fff; @extend .transition; overflow: hidden;
      h3{font-size: .32rem; text-align: center; @include absolute($l:0, $t:50%, $r:0); line-height: 1rem; margin-top: -.5rem; @extend .transition}
      .layer{@include absolute($l:1rem, $t:3rem, $r:0); @extend .transition; opacity: 0; visibility: hidden;
        h4{position: relative; font-size: .32rem; padding-bottom: .36rem;
          &:before{@include before(); left: 0; bottom: .19rem; background: #fff; width: .36rem; height: .03rem}
        }
        .scroll{height: 3.6rem; overflow: hidden; position: relative;
          .mCS-dark-thin>.mCSB_scrollTools .mCSB_draggerRail{width: 1px}
          .mCS-dark-thin>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{width: 1px}
        }
        dd{padding-bottom: .08rem; position: relative;
          &:before{@include before(); left: 0; top: 0; right: 0; bottom: .08rem; background: url("../image/bg1.png") left repeat-y; background-size: 5.22rem; opacity: 0}
          a{display: block; height: .64rem; line-height: .64rem; @extend .ellipsis; color: #fff; font-size: .24rem; position: relative}
          &:hover{
            &:before{opacity: 1}
            a{padding-left: .3rem}
          }
        }
      }
    }
    li.on{flex-shrink: 0; -webkit-flex-shrink: 0; width: 40%;
      h3{opacity: 0}
      .layer{opacity: 1; visibility: visible; top: 1rem}
    }
  }
}
.kass-1{
  .list{
    li{width: 16.666%;
      .layer{left: .6rem; right: .6rem;
        .scroll{height: 4.32rem}
        dd:before{background-size: 3.33rem}
      }
    }
    li.on{width: 5.5rem;
      .layer{top: .5rem}
    }
  }
}

.business{
  .list2{
    ul{@extend .flexWrap; @extend .flexBetween}
    li{width: 4.55rem; height: .94rem; background: #f0f0f0; @extend .flex; @extend .itemsCenter; margin-bottom: .3rem; padding: .14rem;
      b{color: $color; width: .64rem; height: .64rem; line-height: .64rem; background: #fff; text-align: center; font-size: .44rem; font-family: 'Oswald'; position: relative;
        &:before{@include before(); left: 0; top: 0; width: .14rem; height: .14rem; border-left: $color solid 1px; border-top: $color solid 1px}
        &:after{@include before(); right: 0; bottom: 0; width: .14rem; height: .14rem; border-right: $color solid 1px; border-bottom: $color solid 1px}
      }
      p{padding-left: .3rem; font-size: .18rem; line-height: .27rem; color: #666}
    }
  }
}

.kass-3{padding: .3rem 0 1rem 0;
  .bg{background: url("../image/kass-3.jpg") center no-repeat; background-size: cover; height: 3rem; position: relative; color: #fff; padding: 0 .6rem}
  .title{min-height: 2.05rem; padding: .5rem 0;
    h2{font-size: .46rem; line-height: 1em}
    p{font-size: .18rem; padding-top: .15rem}
  }
  a.btn{@extend .flex; @extend .itemsCenter; @extend .justifyCenter; width: 1.9rem; height: .4rem; @include radius(.5rem); font-size: .14rem; color: #fff; background: rgba(198, 21, 29, .7);
    em{padding-right: .48rem; background: url("../image/img38_14.png") right center no-repeat; background-size: .38rem; @extend .transition}
    &:hover{background: $color;
      em{padding-right: .58rem}
    }
  }
  .ewm{width: 2.22rem; @include absolute($t:.55rem, $r:.6rem)}
}

.kass-2{
  .title{padding: 0 0 .2rem 0; position: relative;
    h2{border-bottom: #ccc solid 1px; height: 1.73rem; padding-top: .63rem; line-height: 1.1rem; font-size: .46rem}
    ul{@extend .flex; @include absolute($t:.63rem, $r:0);
      li{margin-left: .75rem; height: 1.1rem; line-height: 1.1rem; position: relative; font-size: .28rem; font-weight: bold; color: #666; @extend .transition; cursor: pointer;
        &:before{@include before(); left: 0; bottom: 0; right: 0; height: 1px; background: $color; opacity: 0}
      }
      li.on{color: $color;
        &:before{opacity: 1}
      }
    }
  }
  .list{background: center no-repeat; background-size: cover;
    .wal{min-height: 6rem; position: relative; padding: 1.7rem 0}
    .arrow a{display: block; width: .21rem; height: .6rem; @include absolute($t:50%); background: center no-repeat; background-size: 100%; margin-top: -.3rem;
      &.prev{left: -.9rem; background-image: url("../image/prev21.png")}
      &.next{right: -.9rem; background-image: url("../image/next21.png")}
    }
    .list-wrapper{width: 13.02rem; position: relative; left: -.27rem; overflow: hidden;
      li{padding: 0 .27rem}
      a{display: block; position: relative;
        &:before{@include before(); left: 0; bottom: 0; right: 0; height: 1.26rem; background: url("../image/bg10.png") center repeat-x; background-size: auto 100%}
        .name{font-size: .18rem; color: #fff; font-weight: bold; @include absolute($l:.22rem, $b:.25rem)}
        &:hover:before{background-image: url("../image/bg10on.png")}
      }
    }
  }
}

.kass-layer{position: fixed; z-index: 100; left: 0; top: 0; right: 0; bottom: 0; background: rgba(255, 255, 255, .7); @extend .flexColumn; @extend .itemsCenter; @extend .justifyCenter; opacity: 0; visibility: hidden; @extend .transition;
  &.show{opacity: 1; visibility: visible}
  .container{width: 12.5rem; background: #fff; min-height: 50vh; @include shadow(0 .14rem .46rem rgba(177, 177, 177, .39)); padding: 0 .16rem; position: relative}
  .scroll{height: 56vh; overflow: hidden; position: relative;
    .mCS-dark-thin>.mCSB_scrollTools .mCSB_draggerRail{width: 1px}
    .mCS-dark-thin>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{width: 1px}
  }
  .close{display: block; width: .9rem; height: .9rem; background: url("../image/close29.png") center no-repeat; background-size: .29rem; @include absolute($t:0, $r:0);
    &:hover{@include rotate(180deg)}
  }
  .title{text-align: center; padding: .4rem 0;
    h2{font-size: .28rem; letter-spacing: .02rem}
    p{padding-top: .15rem; font-size: .18rem; color: #999}
  }
  .form{padding: 0 .4rem;
    ul{@extend .flexWrap; margin-left: -.4rem}
    li{width: 25%; padding: 0 0 .2rem .4rem; position: relative;
      .ico{width: .2rem; height: .2rem; @include absolute($l:.4rem, $t:.19rem);
        img:nth-child(2){@include absolute($l:0, $t:0); opacity: 0}
      }
      .name{@include absolute($l:.7rem, $t:0); line-height: .58rem; font-size: .16rem; color: #999;
        em{color: $color}
      }
      .input{height: .58rem; border-bottom: #ccc solid 1px; position: relative; z-index: 11;
        input{width: 100%; height: .58rem; line-height: .58rem; font-size: .16rem; padding-left: .3rem; color: $color}
      }
    }
    li.on{
      .ico{
        img:nth-child(1){opacity: 0}
        img:nth-child(2){opacity: 1}
      }
      .name{opacity: 0}
      .input{border-color: $color}
    }
  }
  .title2{@extend .flex; @extend .itemsCenter; padding: .4rem 0 .2rem .4rem; font-size: .16rem; line-height: 1em;
    img{width: .2rem}
    span{color: #999; padding: 0 0 0 .1rem}
    em{color: $color}
  }
  .list{padding: 0 .4rem;
    ul{@extend .flexWrap; margin-left: -.4rem}
    li{min-width: 25%; padding: 0 0 .2rem .4rem;
      div{font-size: .16rem; color: #999; cursor: pointer; height: .6rem; line-height: .58rem; text-align: center; border: #ccc solid 1px; padding: 0 .15rem}
      &.on div{background: $color; border-color: $color; color: #fff}
    }
  }
  .submit{padding: .6rem .4rem;
    div{background: $color}
    input{height: .52rem; width: 100%; font-size: .16rem; color: #fff; cursor: pointer}
  }
  .container-2{width: 6rem; min-height: 3rem; text-align: center; padding-top: 1.1rem; display: none;
    h2{font-size: .24rem; padding-bottom: .24rem}
    p{font-size: .16rem; color: #888}
  }
}

.kass-show-1{
  .p-title2{padding: 1rem 0 .5rem 0}
  .list{padding-bottom: .7rem;
    ul{@extend .flexWrap; margin-left: -.4rem}
    li{min-width: 20%; padding: 0 0 .2rem .4rem;
      div{font-size: .18rem; height: .55rem; line-height: .55rem; text-align: center; background: #f0f0f0; color: #666}
    }
  }
}

.kass-show-2{@extend .flexWrap; @extend .flexBetween;
  .col{width: 5.8rem; padding-bottom: 1rem}
  .p-title2{padding-bottom: .4rem}
  .list{border: #ccc solid 1px; border-bottom: 0;
    li{border-bottom: #ccc solid 1px; @extend .flex; @extend .itemsCenter; height: .6rem; font-size: .18rem; color: #666;
      h3{@extend .flex; @extend .itemsCenter; height: .59rem; border-right: #ccc solid 1px; width: 1.62rem; padding-left: .2rem; font-size: .18rem; font-weight: 400; color: #333; background: #f0f0f0;
        img{width: .24rem; margin-right: .14rem}
      }
      p{padding-left: .5rem}
    }
  }
}

.kass-show-3{background: #f0f0f0; padding: .6rem 0 .8rem 0;
  .wal{@extend .flexWrap; @extend .flexBetween}
  .p-title2{width: 100%; padding-bottom: .5rem}
  .scroll{width: 6.25rem; height: 3.65rem; overflow: hidden; position: relative}
  .content{color: #666; padding-right: .5rem; font-size: .18rem; line-height: 1.75em; text-align: justify}
  .img-list{width: 5.81rem; overflow: hidden; position: relative;
    &:after{@include before(); left: 0; top: 0; right: 0; bottom: 0; z-index: 2; background: url("../image/bg10_2.png") center bottom repeat-x; background-size: auto 1.3rem}
    .num{@include absolute($r:.4rem, $b:.2rem); @extend .flex; @extend .itemsCenter; color: #fff;
      a{width: .17rem; height: .32rem; background: center no-repeat; background-size: 100%;
        &.prev{background-image: url("../image/prev17.png")}
        &.next{background-image: url("../image/next17.png")}
      }
      div{padding: 0 .12rem; font-size: .18rem; letter-spacing: .03rem;
        em{font-size: .46rem}
      }
    }
  }
}

.kass-show-4{padding: .95rem 0 1.5rem 0;
  .img{padding-top: .6rem}
}

.kass-show-5{
  .list{padding: .7rem 0 .3rem 0;
    ul{@extend .flexWrap; @extend .flexBetween}
    li{width: 5.72rem; position: relative; padding: 0 0 .6rem .7rem; color: #666;
      .ico{width: .5rem; @include absolute($l:0, $t:0)}
      h3{line-height: .5rem; font-size: .28rem}
      p{font-size: .18rem; line-height: 1.7em; text-align: justify; padding-top: .1rem}
    }
  }
}

.business-7{background: #f0f0f0; padding-bottom: .5rem;
  .wal{@extend .flexWrap; @extend .flexBetween}
  h2{font-size: .46rem; line-height: 1em; padding: .5rem 0 .35rem 0; width: 100%}
  .title{@include absolute($l:0, $t:0, $r:0, $b:0); @extend .flexColumn; @extend .itemsCenter; @extend .justifyCenter; text-align: center; color: #fff; letter-spacing: .04rem; cursor: pointer}
  .videos{width: 9.6rem;
    li{position: relative;
      video{width: 100%}
      .title{
        .ico{width: .8rem}
        h3{font-size: .28rem; padding: .3rem 0 .06rem 0}
        p{font-size: .14rem; font-weight: bold}
      }
    }
    li.on .title{display: none}
  }
  .list{width: 2.65rem; position: relative;
    .list-wrapper{height: 5.04rem; overflow: hidden; position: relative;
      li{height: 1.68rem; position: relative;
        .img{position: relative;
          &:after{@include before(); left: 0; top: 0; right: 0; bottom: 0; background: #000; opacity: .3}
        }
        .title{bottom: .2rem;
          .ico{width: .38rem}
          h3{font-size: .13rem; padding: .1rem 0 .02rem 0}
          p{font-size: .1rem}
        }
      }
      li.on .img:after{background: #c6151d; opacity: .8}
    }
    .arrow{@include absolute($r:0, $b:0); @extend .flex; @extend .flexBetween; width: .88rem;
      &:after{@include before(); left: 50%; top: 0; bottom: 0; width: 1px; background: #ddd}
      a{width: .16rem; height: .31rem; background: center no-repeat; background-size: 100%;
        &.prev{background-image: url("../image/prev16.png");
          &:hover{background-image: url("../image/prev16on.png")}
        }
        &.next{background-image: url("../image/next16.png");
          &:hover{background-image: url("../image/next16on.png")}
        }
      }
    }
  }
}













